<template>
  <view class="cart">
    <!-- 购物车空空如也 -->
    <view class="empty" v-if="cart.length === 0">-----------购物车空空如也-----------</view>
    <block v-else>
      <!-- 选择收获地址 -->
      <view class="address-choose-box" v-if="JSON.stringify(address) === '{}'" @click="addAddress">
        <button type="primary" size="mini" class="btnChooseAddress">请选择收货地址+</button>
      </view>
      <view class="cart_garvest" @click="addAddress" v-else>
        <view class="cart_garvest_information">
          <text>收件人:{{address.userName}}</text>
          <view><text>电话:{{address.telNumber}}</text><uni-icons type="forward" size="20"></uni-icons></view>
        </view>
        <view class="cart_garvest_address">
          <text>收货地址:{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</text>
        </view>
      </view>
      <!-- <myAddress></myAddress> -->
      <!-- 那条线 -->
      <view class="divider">
        <image src="../../static/cart_border@2x.png" mode=""></image>
      </view>
      <!-- 线下面的购物车 -->
      <view class="cart_header">
        <uni-icons type="shop" size="28"></uni-icons>
        <view class="cart_header_title">
          <text>购物车</text>
        </view>
      </view>
      <!--  每一个商品 -->
      <view class="cart_list">
        <view class="cart_item" v-for="(item,index) in cart" :key="index">
          <uni-swipe-action>
            <uni-swipe-action-item :right-options="options" @click="deleSwipeAction(item.id)">
              <!-- 最左侧的选项框 -->
              <view class="cart_item_radio">
                <label class="radio">
                  <radio @click="changeradio(item.id)" color="red" :checked="item.stateFlag" /><text></text>
                </label>
              </view>
              <!-- 选项框右面的图 -->
              <view class="cart_item_image">
                <image class="cart_item_image_image" :src="item.logo"></image>
              </view>
              <!-- 最右侧 -->
              <view class="cart_item_content">
                <view class="cart_item_desc">
                  <text>{{item.name}}</text>
                </view>
                <view class="cart_item_box">
                  <view class="cart_item_price">
                    <text>￥{{item.price}}.00</text>
                  </view>
                  <view class="cart_item_counter">
                    <uni-number-box :min="1" v-model="item.count"></uni-number-box>
                  </view>
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
        <!-- 底层结算 -->
        <view class="footer_total">
          <view class="footer_box">
            <view class="footer_selectAll">
              <label class="radio">
                <radio @click="selectAll" color="red" :checked="all" /><text></text>
              </label>
              <text>全选</text>
            </view>
            <!-- 总价格-->
            <view class="totalPice">
              <text>合计:</text>
              <text class="price">￥{{totalPrice}}</text>
            </view>
            <!-- 结算 -->
            <view class="footer_settlement" @click="toSettlement">
              <text>去结算({{totalNumber}})</text>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import {
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        options: [{
            text: '删除',
            style: {
              backgroundColor: '#dd524d'
            }
          },
          {
            text: '确认',
            style: {
              backgroundColor: '#dd524d'
            }
          }
        ],
        // 收货地址
        address: {}
      };
    },
    computed: {
      ...mapState('m_cart', ['cart', 'selectAllFlag']),
      ...mapGetters('m_cart', ['all', 'totalPrice', 'totalNumber'])
    },
    methods: {
      // 改变选中
      changeradio(id, item) {
        this.$store.commit('m_cart/changeRadio', id);
      },
      // 改变全选
      selectAll() {
        this.$store.commit('m_cart/changeSelectAll')
      },
      // 删除商品
      deleSwipeAction(itemId) {
        this.$store.commit('m_cart/changeDeleteItem', itemId)
      },
      // 更改地址
      async addAddress() {
        const result = await uni.chooseAddress()
        const {
          cityName,
          countyName,
          detailInfo,
          provinceName,
          telNumber,
          userName
        } = result[1]
        this.address = {
          cityName,
          countyName,
          detailInfo,
          provinceName,
          telNumber,
          userName
        }
      },
      // 结算的回调函数
      async toSettlement() {
        if (!uni.getStorageSync('token')) {
          uni.switchTab({
            url: '/pages/my/my'
          });
          uni.showToast({
            title:"请您先去登录~",
            icon:"none"
          })
          return  
        }
        const order_price = this.totalPrice
        const consignee_addr = this.address.cityName + this.address.countyName
        const goods = this.cart.map(value => {
          return {
            goods_id: value.id,
            goods_number: value.count,
            goods_price: value.price
          }
        })
        const params = {
          order_price,
          consignee_addr,
          goods
        }
        const result = await uni.$http.post('/api/public/v1/my/orders/create',params)
        console.log(result);
        uni.showModal({
          title: '订单创建成功',
          confirmText:'去支付',
          content: '订单号:'+result.data.message.order_number,
          success: function(res) {
            if (res.confirm) {
              uni.navigateTo({
                url: '/subpkg/settlement/settlement?query='+ result.data.message.order_number
              });
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .uni-swipe_text--center {
    display: flex;
    width: 80%;
  }

  .address-choose-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart_garvest {
    width: 100%;
    height: 200rpx;
    background: white;
    padding-left: 10rpx;

    .cart_garvest_information {
      display: flex;
      justify-content: space-between;

      text,
      view {
        margin-top: 50rpx;
      }
    }

    .cart_garvest_address {
      margin-top: 30rpx;
    }
  }

  .divider {
    width: 100%;
    height: 12rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .cart_header {
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    width: 100%;
    margin-top: 30rpx;
    background: white;

    uni-icons {
      margin-left: 10rpx;
    }

    .cart_header_title {
      margin-left: 20rpx;
    }
  }

  .cart_list {
    font-size: 28rpx;

    .cart_item {
      display: flex;
      height: 250rpx;
      border-top: 1px solid #ccc;

      .cart_item_radio {
        line-height: 250rpx;
        margin-left: 10rpx;

      }

      .cart_item_image {
        width: 420rpx;
        margin: 0 20rpx;

        .cart_item_image_image {
          width: 100%;
          height: 100%;
        }
      }

      .cart_item_content {
        .cart_item_box {
          display: flex;
          margin-top: 60rpx;
          justify-content: space-between;


          .cart_item_price {
            color: red;
            font-size: 35rpx;
          }

          .cart_item_counter {
            margin-right: 20rpx;
            width: 195rpx;
            height: 60rpx;
          }
        }
      }
    }
  }


  .footer_total {
    position: fixed;
    width: 100%;
    bottom: 0;

    .footer_box {
      display: flex;
      width: 100%;
      height: 100rpx;
      background: white;
      line-height: 100rpx;
      margin-left: 10rpx;
      justify-content: space-between;

      .totalPice {
        width: 30%;

        .price {
          color: red;
        }
      }

      .footer_settlement {
        width: 30%;
        background: #C00000;
        color: white;
        text-align: center;
      }
    }
  }
</style>